<template>
	<view class="">
		<!-- 海报 -->
		<poster id="poster" ref="posterRef" :hide-loading="false" :preload="false" :config="posterConfig"
			@success="onPosterSuccess" @fail="onPosterFail"></poster>
		<view :class="'cu-modal ' + (posterShow ? 'show' : '')" class="ali-modal">
			<view class="cu-dialog" style="margin-top: 100rpx;"
				:style="{height:`calc(100vh - 180rpx - ${CustomBar}px)`}">
				<view class="bg-white flex justify-center" style="height: 92%;padding:40rpx 10rpx">
					<image :src="posterUrl" style="height: 100%;"></image>
				</view>
				<view class="cu-bar bg-white solid-top show-btn" style="height: 8%;min-height:8%;">
					<view class="action margin-0 flex-sub" @tap="hidePosterShow">取消</view>
					<view class="action margin-0 flex-sub solid-left text-red text-bold" @click="savePoster">分享
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import poster from "@/components/wxa-plugin-canvas/poster/index";
	import api from 'utils/api'
	import {
		base64src
	} from 'utils/base64src.js'
	// const {
	// 	base64src
	// } = require("utils/base64src.js");

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				posterConfig: "",
				posterShow: false,
				posterUrl: '', // 生成的海报
			};
		},
		mounted() {},
		components: {
			poster
		},
		props: {
			goodsSpu: {
				type: Object,
				default: () => {}
			},
			gType: {
				type: [String || null],
				default: ''
			},
			activityId: {
				type: [String || null],
				default: ''
			}
		},
		methods: {
			// 生成分享海报
			sharePost() {
				const userInfo = uni.getStorageSync('user_info');
				if (userInfo.enable != '1') {
					uni.showModal({
						title: '提示',
						content: '用户不是正常状态，无法进行分享，请联系运营',
						showCancel: false,
						success(res) {}
					});
					return
				}
				const sku = this.goodsSpu.skus[0]
				sku.sharePic = sku.sharePic ? sku.sharePic : this.goodsSpu.picUrls[0]
				sku.shareInfo1 = sku.shareInfo1 ? sku.shareInfo1 : '长按识别小程序码'
				sku.shareInfo2 = sku.shareInfo2 ? sku.shareInfo2 : '下单购买超值好物'
				const sObj = {
					skuId: sku.id,
					userId: userInfo.id,
				}
				if(this.gType=='yc') {
					sObj.activityId = this.activityId
				}
				api.shareInfo(sObj).then(res => {
					// 二维码
					api.qrCodeUnlimited1({
						appId: 'wxa0e70c974a1c9bc7', //全局颜色变量
						page: 'pages_subject/hwOrder/hw_order',
						scene: res.data.id
					}).then(res => {
						base64src(res.data, res => {
							this.startCreatePoster(res, sku);
						});
					}).catch(err => {
						uni.showModal({
							title: '提示',
							// content: err.data.msg,
							content:'请稍后再试',
							showCancel: false,
							success(res) {}
						});
					})
				})
			},
			startCreatePoster(res, sku) {
				const bg = require('@/static/image/poster-bg1.png')
				const goodImg = sku.sharePic
				const code = res
				const ycActName  = uni.getStorageSync('yc_actName')
				const goodsName = ycActName ? `【${ycActName}】${this.goodsSpu.name}` : this.goodsSpu.name;
				let posterConfig = {
					width: 1350,
					height: 2500,
					backgroundColor: '#F6F7F9',
					debug: false,
					blocks: [],
					texts: [{
							x: 120,
							y: 1660,
							width: 1000,
							baseLine: 'top',
							text: goodsName,
							lineNum: 2,
							fontSize: 54,
							fontWeight: 'bold',
							color: '#333'
						},
						{
							x: 120,
							y: 1800,
							baseLine: 'top',
							text: '活动￥',
							fontSize: 48,
							fontWeight: 'bold',
							color: '#FF001F'
						},
						{
							x: 260,
							y: 1780,
							baseLine: 'top',
							text: sku.salesPrice.toFixed(2),
							fontSize: 74,
							fontWeight: 'bold',
							color: '#FF001F'
						},
						{
							x: 120,
							y: 2060,
							baseLine: 'top',
							text: sku.shareInfo1,
							fontSize: 52,
							color: '#1D2129'
						},
						{
							x: 120,
							y: 2150,
							baseLine: 'top',
							text: sku.shareInfo2,
							fontSize: 52,
							color: '#1D2129'
						}
					],
					images: [{
						width: 1350,
						height: 2500,
						x: 0,
						y: 0,
						url: bg
					}, {
						width: 1150,
						height: 1120,
						x: 100,
						y: 460,
						borderRadius: 100,
						url: goodImg,
					}, {
						width: 270,
						height: 270,
						x: 930,
						y: 2010,
						borderRadius: 270,
						url: code,
					}]
				}
				// 头像/昵称
				const userInfo = uni.getStorageSync('user_info');
				const no_headUrl =
					'https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/e2d67a6e-3b82-4a3e-bb5c-bb7cfbae9f34.png'
				const no_nickName = '我是立健推荐官 发现一个好物 为您推荐'
				posterConfig.images.push({
					width: 140,
					height: 140,
					x: 81,
					y: 190,
					borderRadius: 140,
					url: userInfo && userInfo.headimgUrl ? userInfo.headimgUrl : no_headUrl
				});
				posterConfig.texts.push({
					x: 340,
					y: 236,
					baseLine: 'top',
					text: userInfo && userInfo.nickName ? `我是${userInfo.nickName} 发现一个好物 为您推荐` : no_nickName,
					fontSize: 46,
					fontWeight: 'bold',
					color: '#4E5969'
				});

				this.posterConfig = posterConfig;
				this.posterShow = false;
				console.log(this.$refs.posterRef, 'this.$refs.posterRef')
				this.$refs.posterRef.onCreate(false, this.posterConfig);
			},
			hidePosterShow() {
				this.posterShow = false;
				this.shareShow = '';
				this.$emit('closePoster')

			},
			onPosterSuccess(e) {
				this.posterUrl = e;
				this.posterShow = true;
				console.log(e, 'onPosterSuccess')
			},
			onPosterFail(err) {
				this.$emit('closePoster')
				uni.showModal({
					title: '提示',
					content: '用户头像已失效,请更新用户头像',
					confirmText: '更新头像',
					success() {
						uni.getSystemInfo({
							success: (e) => {
								if (e.hostVersion) {
									const v = e.hostVersion.split('.')
									if (v && v.length > 2) {
										if (Number(v[0]) >= 8 && Number(v[2]) >= 28) {
											uni.navigateTo({
												url: '/pages/user/user-info/index?v=1'
											})
										} else {
											uni.navigateTo({
												url: '/pages/user/user-info/index?v=2'
											})
										}
									}
								}

							}
						})
					}
				});
			},
			//点击保存到相册
			savePoster() {
				wx.showShareImageMenu({
					path: this.posterUrl,
					success: (res) => {
						console.log(res,123465)
					},
					fail: (err) => {
						console.log(err,1111)
						// if (res.errMsg.indexOf('deny') != -1 || res.errMsg.indexOf('denied') != -1) {
						// 	wx.showToast({
						// 		title: '保存相册失败，请设置权限！',
						// 		icon: 'none',
						// 		duration: 2000,
						// 	})
						// } else {
						// 	wx.showToast({
						// 		title: '保存相册失败，请重试！',
						// 		icon: 'none',
						// 		duration: 2000,
						// 	});
						// }
					}
				})
			},
			savePoster1() {
				var that = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							that.trueSave()
						} else if (!res.authSetting.hasOwnProperty("scope.writePhotosAlbum")) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.trueSave()
								}
							})
						} else {
							uni.showModal({
								title: "小程序未授权使用相册",
								content: "请先在设置中打开“添加到相册”开关，然后再次保存图片",
								confirmColor: "#e5432e",
								confirmText: "去设置",
								success(res) {
									if (res.confirm) {
										uni.openSetting({})
									}
								}
							})
						}
					},
					fail(res) {
						console.log(res, 'uni.getSetting');
					}
				})
			},
			trueSave() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.posterUrl,
					success(res) {
						that.posterShow = false;
						that.shareShow = '';
						uni.showModal({
							content: '图片已保存到相册，赶紧晒一下吧~',
							showCancel: false,
							confirmText: '好的',
							confirmColor: '#333',
							success: function(res) {
								if (res.confirm) {
									/* 该隐藏的隐藏 */
									that.shareShow = '';
								}
							},
							fail: function(res) {
								console.log(res);
							}
						});
					}
				});
			},
		}
	};
</script>

<style scoped>
</style>